<!doctype html>
<html>
    <head>
        <title>围堵肘子</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="resources/themes/default/styles/zhouzi.css" />
        <script src="http://img.baidu.com/js/tangram-1.3.9.js"></script>
        <script src="lib/engine/ace-core.js"></script>
        <script src="lib/engine/ace-template.js"></script>
        <script src="lib/engine/ace-event.js"></script>
        <script src="lib/engine/ace-tree.js"></script>
        <script src="../common/channel.common.js"></script>
        <script src="extensions/zhouzi.api.config.js"></script>
        <script src="extensions/zhouzi.api.js"></script>
        <script src="modules/events.config.js"></script>
        <script src="modules/zhouzi-manager.js"></script>
        <script src="modules/message-box.js"></script>
        <script src="modules/player-box.js"></script>
        <script src="modules/editor-box.js"></script>
        <script src="modules/dialog-box.js"></script>
        <script src="modules/letter-box.js"></script>
        <script src="modules/zhouzi-box.js"></script>
    </head>
    <body>
        <div id="main">
            <div id="zhouziBox">
                <div id="roleTools">
                    <label>选择角色：</label>
                    <input type="button" id="player1" value="肘子" cmd="player1" />
                    <input type="button" id="player2" value="爱多" cmd="player2" />
                </div>
                <ul>
                    <script id="zhouziListTemplate" type="text/template">
                    if (!x || !y || x == helper.colCount - 1 || y == helper.rowCount - 1){
                        <li style="left: #{x * 47 + 24}px; top: #{y * 47 + 34}px;" class="star zhouzi#{value}" down="move">
                        
                        </li>
                    } else {
                        <li style="left: #{x * 47 + 24}px; top: #{y * 47 + 34}px;" class="zhouzi#{value}" down="move">
                        </li>
                    }
                    </script>
                    <!-- Debug Start -->
                    <li style="left: 0px; top: 0px;"></li>
                    <li style="left: 32px; top: 0px;"></li>
                    <li style="left: 64px; top: 0px;"></li>
                    <li style="left: 0px; top: 32px;"></li>
                    <li style="left: 32px; top: 32px;"></li>
                    <li style="left: 64px; top: 32px;"></li>
                    <li style="left: 0px; top: 64px;"></li>
                    <li style="left: 32px; top: 64px;"></li>
                    <li style="left: 64px; top: 64px;"></li>
                    <!-- Debug End -->
                </ul>
            </div>
            <div id="playerBox">
                <div id="playerList">
                    <ul>
                        <script id="playerListTemplate" type="text/template">
                        <li class="#{state} !#{helper.node.getClasses()}" down="focus">
                        if (this.weibo){
                            <span class="letter" cmd="letter">私信</span><span class="state"></span><a href="#{weibo}" target="_blank"><span class="weibo"></span></a><span class="nick" title="#{id}">#{nick}</span>
                        } else {
                            <span class="letter" cmd="letter">私信</span><span class="state"></span><span class="nick" title="#{id}">#{nick}</span>
                        }
                        </li>
                        </script>
                        <!-- Debug Start -->
                        <li class="online"><span class="letter">私信</span><span class="state"></span><a href="http://weibo.com/zswang" target="_blank"><span class="weibo"></span></a><span class="nick" title="ttt1">昵称 微博</span><button>关注</button><button>移除</button></li>
                        <li class="online"><span class="letter">私信</span><span class="state"></span><span class="nick" title="ttt2">昵称 他人</span></li>
                        <li class="offline self"><span class="letter">私信</span><span class="state"></span><span class="nick" title="ttt3">昵称 自己</span></li>
                        <!-- Debug End -->
                    </ul>
                </div>
                <div id="playerTools" class="tools">
                    <button cmd="nick">昵称</button>
                    <button cmd="viewLetter">私信<span id="newLetterNumber" class="number"></span></button>
                    <button cmd="weibo" title="微博"><span class="weibo"></span></button>
                </div>
                <div id="messageList">
                    <ul>
                        <script id="messageListTemplate" type="text/template">
                        <li class="!#{helper.node.getClasses()}">
                        if (this.weibo){
                            <a href="#{weibo}" target="_blank"><span class="weibo"></span></a>
                        }
                            <span class="nick" title="#{from}">#{nick}</span><span class="time">#{helper.formatTime(time)}</span><span class="letter" cmd="letter">私信</span>
                            <pre class="message"><p>!#{helper.mutiline(message)}</p></pre>
                        </li>
                        </script>

                        <!-- Debug Start -->
                        <li class="self">
                            <span class="nick">昵称3</span>&lt;<span class="id">kkdd1</span>&gt;<span class="time">19:51:23</span><span class="letter" cmd="letter">私信</span>
                            <pre class="message"><p>聊天内容1！</p></pre>
                        </li>
                        <li>
                            <span class="nick">昵称2</span>&lt;<span class="id">kkdd2</span>&gt;<span class="time">19:51:32</span><span class="letter" cmd="letter">私信</span>
                            <pre class="message"><p>聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2！</p></pre>
                        </li>
                        <li>
                            <span class="nick">昵称3</span>&lt;<span class="id">kkdd3</span>&gt;<span class="time">19:51:23</span><span class="letter" cmd="letter">私信</span>
                            <pre class="message"><p>聊天内容3！</p></pre>
                        </li>
                        <!-- Debug End -->
                    </ul>
                </div>
                <div id="editorTools" class="tools">
                    <label><input type="checkbox" id="ctrlEnter" cmd="focus">Ctrl+Enter</label>
                    <input id="editor" type="text" /><button cmd="send">发送</button>
                </div>
            </div>
        </div>
        <div id="letterBox" class="hidden">
            <div class="masks">
                <div class="dialog">
                    <div class="head"><span class="title">私信</span><span class="close" cmd="cancel"></span></div>
                    <div class="content">
                        <ul>
                            <script id="letterListTemplate" type="text/template">
                            <li class="!#{helper.node.getClasses()}">
                            if (helper.node.getStatus("self")) {
                                <b>To: </b><span class="nick">#{toNick}</span>&lt;<span class="id">#{to}</span>&gt;<span class="time">#{helper.formatTime(time)}</span>
                            } else {
                                <span class="nick">#{nick}</span>&lt;<span class="id">#{from}</span>&gt;<span class="time">#{helper.formatTime(time)}</span><span class="reply" cmd="reply">回复</span>
                            }
                                <pre class="message"><p>!#{helper.mutiline(message)}</p></pre>
                            </li>
                            </script>
                            <!-- Debug Start -->
                            <li class="self">
                                <span class="nick">昵称1</span>&lt;<span class="id">kkdd1</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容1！</p></pre>
                            </li>
                            <li>
                                <span class="nick">昵称2</span>&lt;<span class="id">kkdd2</span>&gt;<span class="time">19:51:32</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2！</p></pre>
                            </li>
                            <li>
                                <span class="nick">昵称3</span>&lt;<span class="id">kkdd3</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容3！</p></pre>
                            </li>
                            <li class="self">
                                <span class="nick">昵称1</span>&lt;<span class="id">kkdd1</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容1！</p></pre>
                            </li>
                            <li class="self">
                                <span class="nick">昵称2</span>&lt;<span class="id">kkdd2</span>&gt;<span class="time">19:51:32</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2！</p></pre>
                            </li>
                            <li>
                                <span class="nick">昵称3</span>&lt;<span class="id">kkdd3</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容3！</p></pre>
                            </li>
                            <li class="self">
                                <span class="nick">昵称1</span>&lt;<span class="id">kkdd1</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容1！</p></pre>
                            </li>
                            <li class="self">
                                <span class="nick">昵称2</span>&lt;<span class="id">kkdd2</span>&gt;<span class="time">19:51:32</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2聊天内容2！</p></pre>
                            </li>
                            <li>
                                <span class="nick">昵称3</span>&lt;<span class="id">kkdd3</span>&gt;<span class="time">19:51:23</span><span class="reply" cmd="reply">回复</span>
                                <pre class="message"><p>聊天内容3！</p></pre>
                            </li>
                            <!-- Debug End -->
                        </ul>
                    </div>
                    <div class="foot">
                        <button cmd="ok">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <script id="dialogTemplate" type="text/template">
            <div class="masks">
                <div class="dialog">
                    switch(type) {
                        case "nick":
                        
                    <div class="head"><span class="title">修改昵称</span><span class="close" cmd="cancel"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><span>昵称：</span><input type="text" id="inputNick" value="#{nick}" maxlength="#{maxNick}"/></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="cancel">取消</button><button cmd="ok">确定</button>
                    </div>
                            break;

                        case "weibo":
                        
                    <div class="head"><span class="title">修改微博</span><span class="close" cmd="cancel"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><span>微博：</span><input type="text" id="inputWeibo" value="#{weibo}" maxlength="#{maxWeibo}"/></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="cancel">取消</button><button cmd="ok">确定</button>
                    </div>
                            break;

                        case "error":
    
                    <div class="head"><span class="title">错误</span><span class="close" cmd="cancel"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><p>#{message}</p></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="ok">确定</button>
                    </div>
    
                            break;

                        case "passport":

                    <div class="head"><span class="title">请登记(无需注册)</span></div>
                    <div class="content">
                        <div class="panel">
                            <div><p><a target="_blank" href="!#{url}" cmd="close">点击登记</a></p></div>
                        </div>
                    </div>
                            break;
                            
                        case "letter":
                        
                    <div class="head"><span class="title">给 #{nick} 发私信</span><span class="close" cmd="cancel"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><textarea id="inputLetter"></textarea></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="cancel">取消</button><button cmd="ok">确定</button>
                    </div>
                            break;
                        
                    }
                </div>
            </div>
            </script>
            <!-- Debug Start -->
            <div class="masks" style="display: none;">
                <div class="dialog">
                    <div class="head"><span class="title">修改昵称</span><span class="close"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><span>昵称：</span><input type="text" id="inputNick" maxlength="20"/></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="cancel">取消</button><button cmd="ok">确定</button>
                    </div>
                </div>
                <div class="dialog">
                    <div class="head"><span class="title">错误</span><span class="close"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><p>无效的昵称！</p></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="ok">确定</button>
                    </div>
                </div>
                <div class="dialog">
                    <div class="head"><span class="title">给 刀刀  发私信</span><span class="close"></span></div>
                    <div class="content">
                        <div class="panel">
                            <div><textarea id="inputLetter"></textarea></div>
                        </div>
                    </div>
                    <div class="foot">
                        <button cmd="cancel">取消</button><button cmd="ok">确定</button>
                    </div>
                </div>
            </div>
            <!-- Debug End -->
        </div>
        <script>
            baidu.on(window, "load", function() {
                AceCore.start({
                    lib: baidu
                });
            });
        </script>
    </body>
</html>